<template>
	<view class="register">
		<view class="item">
			<text class="required label">手机</text>
			<native_input maxlength="11" @input="inputDelegator('phone', $event)" placeholder="该手机号将作为您的登录手机号" type="number" />
		</view>
		<view class="item">
			<text class="required label">姓名</text>
			<native_input @input="inputDelegator('name', $event)" placeholder="请输入姓名" />
		</view>
		<view class="item">
			<text class="required label">性别</text>
			<view class="sex" :class="sex.name ? '':' placeholder'">
				<picker @change="selectSex" value="0" range-key="name" :range="sexList">
					{{sex.name || '请选择性别'}}
					<image src="/static/images/login/right_arrow.png" class="global_right_arrow_style" />
				</picker>
			</view>
		</view>
		<view class="item">
			<text class="required label">邮箱</text>
			<native_input @input="inputDelegator('email', $event)" placeholder="请输入邮箱" />
		</view>
		<view class="item">
			<text class="required label">公司名称</text>
			<native_input @input="inputDelegator('companyName', $event)" placeholder="请输入公司名称" />
		</view>
		<view class="item">
			<text class="label">其他电话</text>
			<native_input @input="inputDelegator('otherTel', $event)" placeholder="请输入其他电话" />
		</view>
		<customButton classes="bigBt sure" @tap='submit'>提交</customButton>
	</view>
</template>

<script>
	import native_input from '../../common/components/input/index.vue'
	import input_code from '@/common/components/input/input-code/index.vue'
	import customButton from '@/common/components/button/index.vue'
	export default {
		components: {
			native_input,
			customButton,
			input_code
		},
		data() {
			return {
				phone: '',
				name: '',
				email: '',
				otherTel: '',
				companyName: '',
				sex: {
					name: '',
					code: ''
				},
				sexList: [{
					name: '保密',
					code: '0'
				}, {
					name: '男',
					code: '1'
				}, {
					name: '女',
					code: '2'
				}]
			}
		},
		methods: {
			inputDelegator(id, event) {
				if (event.target.value) {
					this[id] = event.target.value
				}
			},
			selectSex(e) {
				// console.log(e)
				this.sex = this.sexList[e.target.value]
			},
			submit() {
				if (!this.phone) {
					uni.showToast({
						title: '请输入手机号！',
						icon: 'none'
					})
					return
				}
				if (!/^[1][3,4,5,7,8][0-9]{9}$/.test(this.phone)) {
					uni.showToast({
						title: '请输入正确的手机号！',
						icon: 'none'
					})
					return
				}
				if (!this.name) {
					uni.showToast({
						title: '请输入姓名！',
						icon: 'none'
					})
					return
				}
				if (!this.sex.name) {
					uni.showToast({
						title: '请选择性别！',
						icon: 'none'
					})
					return
				}
				if (!this.email) {
					uni.showToast({
						title: '请输入邮箱！',
						icon: 'none'
					})
					return
				}
				if (!this.companyName) {
					uni.showToast({
						title: '请输入公司名称！',
						icon: 'none'
					})
					return
				}

				this.http.POST({
					name: 'register',
					params: {
						roleType: this.$store.state.role, // 导购ID,
						mobeilPhone: this.phone,
						name: this.name,
						gender: this.sex.code,
						phone: this.phone,
						email: this.email,
						phone: this.otherTel,
						companyName: this.companyName
					}
				}).then(res => {
					if (res.result == 'success') {
						uni.showModal({
							title: '温馨提示',
							showCancel: false,
							content: '您的注册申请已提交，审核通过后即可登录',
							success(res) {
								uni.navigateBack({
									delta: 1
								})
							}
						})
					}
				})
			}
		}
	}
</script>

<style>
	.register {
		background-color: #FFFFFF;
		width: 100%;
		height: 100vh;
		border-top: 1upx solid #DDDDDD;
	}

	.register .item {
		flex-wrap: wrap;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 25upx 30upx;
		border-bottom: 1upx solid #DDDDDD;
	}

	.item .sex {
		font-size: 28upx;
	}

	.item .label {
		font-size: 28upx;
	}

	.item .required::before {
		content: "*";
		color: #E61E10;
		font-size: 28upx;
	}

	.item native_input {
		width: 70%;
		text-align: right;
	}

	.register .sure {
		border-radius: 0upx;
		margin-top: 195upx;
	}
</style>
